<template>
  <layout-content header="Config Maps">
    <div style="float: left">
      <el-button
        v-has-permissions="{
          scope: 'namespace',
          apiGroup: '',
          resource: 'configmaps',
          verb: 'create'
        }"
        type="primary"
        size="small"
        @click="onYamlCreate"
      >
        YAML
      </el-button>
      <el-button
        v-has-permissions="{
          scope: 'namespace',
          apiGroup: '',
          resource: 'configmaps',
          verb: 'create'
        }"
        type="primary"
        size="small"
        @click="onShouldCreaet"
      >
        {{ $t("commons.button.create") }}
      </el-button>
      <el-button
        v-has-permissions="{
          scope: 'namespace',
          apiGroup: '',
          resource: 'configmaps',
          verb: 'delete'
        }"
        type="primary"
        size="small"
        :disabled="selections.length === 0"
        @click="confirmDelete()"
      >
        {{ $t("commons.button.delete") }}
      </el-button>
    </div>
    <complex-table
      v-model:selects="selections"
      v-loading="uiState.loading"
      :data="srcList"
      :pagination-config="query.paginationConfig"
      :search-config="query.searchConfig"
      @search="reloadResourceList"
    >
      <el-table-column type="selection" fix />
      <el-table-column
        :label="$t('commons.table.name')"
        prop="metadata.name"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <span class="span-link" @click="onShouldViewDetails(row)">
            {{ row.metadata.name }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('business.namespace.namespace')"
        prop="metadata.namespace"
        min-width="50px"
      />
      <el-table-column
        :label="$t('business.cluster.label')"
        prop="metadata.labels"
        min-width="200px"
      >
        <template #default="{ row }">
          <el-tag
            v-for="(value, key) in row.metadata.labels"
            :key="key"
            type="info"
            size="small"
          >
            {{ key }}={{ value }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('commons.table.created_time')"
        prop="metadata.creationTimestamp"
        fix
        min-width="50px"
      >
        <template #default="{ row }">
          {{ row.metadata.creationTimestamp }}
        </template>
      </el-table-column>
      <ko-table-operations
        :buttons="options.buttons"
        :label="$t('commons.table.action')"
      />
    </complex-table>
  </layout-content>
</template>

<script setup lang="ts">
import LayoutContent from "@/views/domain/kubeHud/views/components/layout/LayoutContent.vue";
import ComplexTable from "@/views/domain/kubeHud/views/components/complex-table/index.vue";
import KoTableOperations from "@/views/domain/kubeHud/views/components/ko-table-operations/index.vue";
import { useI18n } from "vue-i18n";
import { ConfigMap, useK8SApi } from "@/views/domain/kubeHud/api/k8s";
import { useVerifyRouter } from "@/router/use";
import { reactive, ref } from "vue";
import {
  useBaseCRUDProvider,
  useBaseCRUDRoute
} from "@/views/domain/kubeHud/api/provider/baseListProvider";
import { KRouteConfigMap } from "@/views/domain/kubeHud/router";
import { checkPermissions } from "@/views/domain/kubeHud/utils/permission";
import { loadRouteLocation } from "vue-router";
// import {
//   deleteConfigMap,
//   getConfigMap,
//   listConfigMaps
// } from "@/api/configmaps";
// import { downloadYaml } from "@/utils/actions";
// import { checkPermissions } from "@/utils/permission";

const { t } = useI18n();
const { configMapRepo } = useK8SApi();

type Prop = {};
const props = withDefaults(defineProps<Prop>(), {});

const {
  query,
  selections,
  srcList,
  router,
  downloadSourceAsYaml,
  confirmDelete,
  uiState,
  reloadResourceList
} = useBaseCRUDProvider({
  request: {
    getDetailsReq: configMapRepo.getConfigMapDetail,
    getListReq: configMapRepo.getConfigMap,
    updateReq: configMapRepo.updateConfigMap,
    createReq: configMapRepo.createConfigMap,
    deleteReq: configMapRepo.deleteConfigMap
  }
});

const { pushTo } = useBaseCRUDRoute({
  router,
  routeMap: {
    details: KRouteConfigMap.Details,
    create: KRouteConfigMap.Create,
    createInYaml: KRouteConfigMap.CreateInYaml,
    edit: KRouteConfigMap.Edit
  }
});

const options = reactive({
  buttons: [
    {
      label: t("commons.button.edit"),
      icon: "el-icon-edit",
      click: row => {
        pushTo("edit", {
          namespace: row.metadata.namespace,
          name: row.metadata.name,
          yamlShow: "false"
        });
      },
      disabled: async () => {
        return !(await checkPermissions({
          scope: "namespace",
          apiGroup: "",
          resource: "configmaps",
          verb: "update"
        }));
      }
    },
    {
      label: t("commons.button.edit_yaml"),
      icon: "el-icon-edit",
      click: row => {
        pushTo("edit", {
          name: row.metadata.name,
          namespace: row.metadata.namespace,
          yamlShow: true
        });
      },
      disabled: async () => {
        return !(await checkPermissions({
          scope: "namespace",
          apiGroup: "",
          resource: "configmaps",
          verb: "update"
        }));
      }
    },
    {
      label: t("commons.button.download_yaml"),
      icon: "el-icon-download",
      click: row => {
        downloadSourceAsYaml(row, `${row.metadata.name}.yaml`);
      }
    },
    {
      label: t("commons.button.delete"),
      icon: "el-icon-delete",
      click: row => {
        confirmDelete(row);
      },
      disabled: () => {
        return !checkPermissions({
          scope: "namespace",
          apiGroup: "",
          resource: "configmaps",
          verb: "delete"
        });
      }
    }
  ]
});

const onYamlCreate = () => {
  pushTo("createInYaml");
};

const onShouldCreaet = () => {
  pushTo("create");
};
const onShouldEdit = () => {
  pushTo("edit");
};
const onShouldViewDetails = (row: ConfigMap) => {
  pushTo("details", {
    name: row.metadata.name,
    namespace: row.metadata.namespace
  });
};
</script>

<style scoped></style>
